export default {
  data() {
    return {
      isDemo: false
    }
  },

  methods: {

    prePauseOrPlay(isPause) {
      this.isDemo = true

      if (!this.isPauseValue) {
        this.pauseOrPlay(isPause)
      }

      if (this.curStep >= this.steps.length - 1) {
        this.isDemo = false
      }
    },
    

    afterPauseOrPlay() {
      this.isDemo = false
    },

    preStepForward() {
      if (this.curStep < this.steps.length - 1) {
        if (this.steps[this.curStep +  1].includes('skip')) {
          this.curStep ++
        }

        this.isDemo = true
        this.stepForward()
      }

    },
    afterStepForward() {
      // 到了某一步的结束
      if (this.curStep === this.steps.length - 1) {
        this.isDemo = false
      }


    },
    preSkipForward() {
      if (this.curStep < this.steps.length - 1) {
        this.isDemo = true
        this.skipForward()
      }

    },

    stepBack() {
      if (this.curStep != 0) {
        let s = this.curStep - 1
        if (this.steps[this.curStep - 1].includes('skip')) {
          s = this.curStep - 2
        }
        this.transit(this.curStep, s, () => {
          this.curStep = s
          this.afterStepBack()
        })
      }
    },


    afterSkipForward() {
      this.isDemo = false
    },

    preStepBack() {
      if (this.curStep === 0) {
        this.clearCanvas()
        this.steps = []
        this.perStepStarts = []
        this.isDemo = false
        this.root = undefined
        this.perStepEnds = {
          0: undefined
        }
        return
      }

      this.isDemo = true
      this.stepBack()
    },

    afterStepBack() {
      // 到了某一步的结束
      if (this.perStepEnds[this.curStep]) {
        this.isDemo = false
        this.root = this.perStepEnds[this.curStep]
        this.draw2_3_4_tree && this.draw2_3_4_tree(this.root, this.ctx2)
        this.perStepStarts = this.perStepStarts.filter(index => index < this.curStep)
        this.steps = this.steps.filter((_, index) => index <= this.curStep)
      }
    },

    preSkipBack() {
      if (this.perStepStarts.findIndex(index => index == this.curStep) > 0) {
        return
      }
      this.isDemo = true
      let i = 0
      while (i < this.perStepStarts.length) {
        if (this.curStep < this.perStepStarts[i]) {
          break
        }
        i++
      }
      this.skipBack(this.perStepStarts[i - 1])
    },

    afterTransit() {

      let i = 0
      while (i < this.perStepStarts.length) {
        if (this.curStep < this.perStepStarts[i]) {
          break
        }
        i++
      }
      let startStepIndex = this.perStepStarts[i - 1];

      let endIndexs = []
      Object.keys(this.perStepEnds).forEach(endIndex => {
        endIndexs.push(parseInt(endIndex))
      })
      endIndexs.sort((a, b) => a - b)
      i = 0

      while (i < endIndexs.length) {
        if (endIndexs[i] >= this.curStep) {
          break
        }
        i++
      }
      let endStepIndex = endIndexs[i]

      let skipNum = 0
      let h = 0
      for(let j = startStepIndex; j <= endStepIndex; j ++) {
        if (this.steps[j].includes('skip')) {
          skipNum ++

          if (this.curStep > j) {
            h ++
          }
        }
      }


      if (startStepIndex === endStepIndex) {
        this.$bus.$emit('progress', 0)
      } else {
        this.$bus.$emit('progress', Math.ceil((this.curStep - startStepIndex - h) / (endStepIndex - startStepIndex - skipNum) * 100))
      }

    },


    clear() {
      this.doClear(() => {
        this.perStepStarts = []
        this.isDemo = false
        this.root = undefined
        this.perStepEnds = {
          0: undefined
        }
      })
    },
  }
}